import { FC, useState, useEffect, useRef } from 'react';
import { Divider, Space, Upload, Table, Button, message, Spin, Pagination } from 'antd';
import { usePageInfo } from '@src/utils/useIndex';
import { PlanManagementSearchForm } from './planManagementSearchForm';
import { productPlanFileUploadAPI } from '@src/apis/configManagement';
import './batchAddPlan.less';
import { UploadOutlined } from '@ant-design/icons';

export const BatchAddPlan: FC = () => {
  const [tableLoading, setTableLoading] = useState<boolean>(false);
  const [fileList, setFileList] = useState<any>([]);
  const [exportResponse, setExportResponse] = useState<any>({});
  useEffect(() => {
    //默认进来不查询页面
    console.log('默认进来查询页面');
    return () => {};
  }, []);
  const downLoadF = () => {
    fetch(
      'http://127.0.0.1:5500/src/client/resource/files/%E4%BA%A7%E5%93%81%E7%AE%A1%E7%90%86-%E6%89%B9%E9%87%8F%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx',
      {
        headers: {
          accept:
            'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
          'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
          'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="96", "Microsoft Edge";v="96"',
          'sec-ch-ua-mobile': '?0',
          'sec-ch-ua-platform': '"macOS"',
          'sec-fetch-dest': 'document',
          'sec-fetch-mode': 'navigate',
          'sec-fetch-site': 'same-origin',
          'sec-fetch-user': '?1',
          'upgrade-insecure-requests': '1',
        },
        referrer: 'http://127.0.0.1:5500/src/client/index.html',
        referrerPolicy: 'strict-origin-when-cross-origin',
        body: null,
        method: 'GET',
        mode: 'cors',
        credentials: 'include',
      }
    ).then((result: any) => {
      result.blob().then((blobStream: any) => {
        const blob = new Blob([blobStream], { type: 'blob' });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'asdf.xlsx');
        document.body.appendChild(link);
        link.click();
        link.remove();
        window.URL.revokeObjectURL(url);
      });
    });
  };
  return (
    <div className="pageBox batchAddPlan fff pad20">
      <Spin spinning={tableLoading} delay={100}>
        <div>
          <Upload
            onRemove={() => {
              setFileList([]);
            }}
            className="inputFile"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            listType="picture"
            maxCount={1}
            beforeUpload={(file: any) => {
              // setFileList([file, ...fileList]);
              setFileList([file]);
              return false;
            }}
            fileList={fileList}
          >
            <Button icon={<UploadOutlined />}>选择Excel文件</Button>
          </Upload>
          {/* <a onClick={downLoadF}>产品批量导入模板下载</a> */}
          <div className="pad20-0" style={{}}>
            <a
              style={{ marginRight: '20px' }}
              href="http://127.0.0.1:5500/src/client/resource\files\产品管理-批量导入模板.xlsx"
              download={'aaa.xlsx'}
            >
              产品批量导入模板下载
            </a>
            <Button
              disabled={fileList.length === 0}
              onClick={() => {
                console.log(fileList);
                let param: any = new FormData();
                param.append('userCode', '00001314');
                param.append('file', fileList[0]);
                productPlanFileUploadAPI(param)
                  .then((result: any) => {
                    console.log(result);
                    setExportResponse(result);
                  })
                  .catch((err: any) => {
                    console.log(err);
                    setExportResponse(err.data);
                  });
              }}
            >
              上传批量导入文件
            </Button>
          </div>
          <div className="publicH1Box margT20">
            <h1>导入结果</h1>
            <div className="itemBox">
              <ul>
                {exportResponse.statusText?.split('\n').map((item: any, index: number) => {
                  return <li key={index}>{item}</li>;
                })}
              </ul>
            </div>
          </div>
        </div>
      </Spin>
    </div>
  );
};
